<template>
	<view class="dingdan m-h100 ">
		<u-tabs class="border-bottom py-1 sticky bgcolor1" :list="list" lineColor="#507EF7" lineHeight="5" lineWidth="40"
			:activeStyle="{
		        color: '#507EF7',
		        fontWeight: 'bold',
		    }" :inactiveStyle="{
		        color: '#333333',
		        transform: 'scale(1)'
		    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:50%;" :current="tabActive"
			@change="changeTab"></u-tabs>

		<view class="p-3">
			<view class="flex justify-between bgcolor9 p-2 bgcolor1 rounded mb-1 border" v-for="item in 4"
				@click="goDetails(item)">
				<img class="imgBox rounded"
					src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00164-1636.jpg" alt="" />
				<view class="flex-1 flex flex-column ml-2 justify-between">
					<view class="flex justify-between">
						<p>10kg新鲜水果</p>
						<view class="flex">
							<u-icon name="star-fill" color="#000000" size="28"></u-icon>
							<p class="pl-1 flex flex-column justify-center font-weight-bold">100</p>
						</view>
					</view>
					<view class="flex justify-end font-weight-bold">
						<p>X</p>
						<p class="pl-1">10</p>
					</view>
					<view class="flex justify-between ftcolor2">
						<p>待核销</p>
						<p class="flex-1 text-center">消耗积分</p>
						<p class="font-weight-bold">200</p>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabActive: 0,
				active: 0,
				list: [{
					name: '已核销'
				}, {
					name: '待核销'
				}]
			}
		},
		methods: {
			changeTab(e) {
				this.tabActive = e.index
			},
			// 选择tab标签
			chooseActive(item) {
				this.active = item
			},
			// 跳转至订单详情
			goDetails(item) {
				uni.navigateTo({
					url: '/shopPages/order/orderDetails'
				})
			}
		}
	}
</script>

<style lang="scss">
	.dingdan {
		.width120 {
			width: 120rpx;
		}

		.imgBox {
			width: 200rpx;
			height: 130rpx;
		}
	}
</style>